<template>
    <div class="centerRight">
        <div class="title">
            受理用时分析
        </div>
        <div class="time-boxs">
            <div class="time-box">
                <div class="item1">
                    <img src="../../assets/hqrepair/blue.png">
                    <span class="item-title">20分钟内</span>
                    <span class="item-num">{{ data.d1|currency }}</span>
                </div>
                <div class="item2">
                    <img src="../../assets/hqrepair/blue-box.png">
                    <span class="item-p">{{ data.d1p }}%</span>
                </div>
            </div>
            <div class="time-box">
                <div class="item1">
                    <img src="../../assets/hqrepair/green.png">
                    <span class="item-title">2小时内</span>
                    <span class="item-num">{{ data.d2}}</span>
                </div>
                <div class="item2">
                    <img src="../../assets/hqrepair/green-box.png">
                    <span class="item-p">{{ data.d2p }}%</span>
                </div>
            </div>
            <div class="time-box">
                <div class="item1">
                    <img src="../../assets/hqrepair/yello.png">
                    <span class="item-title">8小时内</span>
                    <span class="item-num">{{ data.d3}}</span>
                </div>
                <div class="item2">
                    <img src="../../assets/hqrepair/yello-box.png"> 
                    <span class="item-p">{{ data.d3p }}%</span>
                </div>
            </div>
            <div class="time-box">
                <div class="item1">
                    <img src="../../assets/hqrepair/red.png">
                    <span class="item-title">8小时以上</span>
                    <span class="item-num">{{ data.d4}}</span>
                </div>
                <div class="item2">
                    <img src="../../assets/hqrepair/red-box.png">
                    <span class="item-p">{{ data.d4p }}%</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        t: {
            type: String,
            default: '0'
        }
    },
}
</script>

<style lang="scss" scoped>
$box-width: 100%;
$box-height: 100%;
$box_padding_tb:20px;
.centerRight {
    height: $box-height;
    width: $box-width;
    background-image: url("../../assets/hqrepair/box-1493.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .title {
        font-size: 1.2vw;
        line-height: 2.2vw;
        text-shadow: 2px 1px 0px rgba(0, 31, 61, 0.46);
        text-align: center;
        color: #fff;
        font-family: DingTalk JinBuTi;
    }

    .time-boxs {
        display: flex;
        flex-direction: row;
		justify-content: space-between;
        gap: $box_padding_tb;
        padding: 20px;
        .time-box{
            display: flex;
            flex-direction: column;
		    justify-content: space-around;
            text-align: center;
            img{
                width: 95%;
            }
            .item1{
                margin-top: 1vw;
                flex-basis: 70%;
                position: relative; 
                .item-title{
                    display: block;
                    position: absolute;
                    top: 0.3vw;
                    width: 100%;
                    font-size: 16px;
                    text-align: center; 
                    font-family: Alibaba_275;
                    color: #FFF;
                }
                .item-num{
                    display: block;
                    position: absolute;
                    top: 2.7vw;
                    font-family: DINPro;
                    font-weight: bold;
                    font-size: 1.75vw;
                    width: 100%;
                    color: #FFFFFF;
                    text-shadow: 0px 5px 1px rgba(0,0,0,0.39), 0px 1px 11px rgba(156,205,255,0.59);
                    text-align: center;
                }
            }
            .item2{
                flex-basis: 30%;
                position: relative; 
                margin-top: 1vw;
                .item-p{
                    display: block;
                    position: absolute;
                    width: 100%;
                    text-align: center;
                    top: 0.5vw;
                    font-family: DINPro;
                    font-size: 1.375vw;
                    color: #FFFFFF;
                    text-shadow: 0px 1px 11px rgba(156,205,255,0.59);
                }
            }
        }
    }
}
</style>